
<style lang="less">
	.goodsinfo{
		height:100%;overflow-y:auto;box-sizing:border-box;padding-bottom:50px;
		.box{ padding:5px; background: #fff;}
		.img{ width:100%; display: block;height:100%;}
		.price{
			color:#F56C6C;
			font-size: 12px;
			font-family: Arial;
			i{
				font-size: 16px;
				font-style: normal;
			}
		}
		.title{
			font-size: 14px; color:#303133;
		}
		.attrs{
			margin-top:10px;
			border-top:1px solid #F2F6FC;
			position: relative;
			padding:10px 0 3px;
			padding-left: 40px;
			font-size: 12px;
			height:40px;
			> span{
				position: absolute;
				left:0; top:10px;
				width:40px;
				text-align: center;
				color: #909399;
				line-height:40px;
			}
			ul {
				height:40px;
				overflow-y: hidden;
				// font-size: 13px;
				// padding:2px 0;
				li {
					float:left;
					text-align: center;
					color:#606266;
					width:60px;
					p{line-height:18px; height:18px;}
				}
			}
		}
		._item{
			font-size: 12px;
			color: #606266;
			line-height:24px;
			span{
				color:#909399;
				display: inline;
				padding : 0 10px;
			}
		}
		.celltitle{
			line-height: 24px;
			font-size: 12px;
			color: #303133;
			// font-weight: bold;
			span{
				position: relative;
				top:1px;
				font-weight: normal;
				color:#909399;
				padding-right:10px;
			}
		}
		.content_title{
			font-size: 12px; padding:10px 5px 0;
			color: #606266;
		}
		.content{
			font-size: 12px;
			color: #909399;
			padding:5px;
		}
	}
</style>

<template>
	<div v-loading="loading" class="goodsinfo">
		<div v-if="data.goods">
			<van-swipe :autoplay="3000">
				<van-swipe-item style="height:300px;">
					<img :src="imgurl" class="img"/>
				</van-swipe-item>
			</van-swipe>

			<div class="box">
				<div style="padding: 0 8px;">
					<p class="price">￥<i>{{data.price}}</i></p>
					<p class="title">{{title}}</p>
				</div>
				<div class="attrs">
					<span>属性</span>
					<vue-scroll :ops="scrollops">
						<ul class="clr" :style="'width:'+(Object.values(data.goods.attrs).length * 60)+'px'">
							<li v-for="(attr,key) in data.goods.attrs" :key="key">
								<p>{{key}}</p>
								<p>{{attr}}</p>
							</li>
						</ul>
					</vue-scroll>
				</div>
			</div>
			<div style="height:5px;"></div>
			<div class="box">
				<div class="_item">
					<span>货号</span>
					{{data.sn}}
				</div>
				<div class="_item">
					<span>品牌</span>
					{{data.goods.brand ? data.goods.brand.title : '暂无品牌'}}
				</div>
			</div>
			<div style="height:5px;"></div>
			<van-cell-group>
				<van-cell is-link @click="itemspecspop = true">
					<div slot="title" class="celltitle">
						<span>已选</span>
						{{spec}}
						，
						{{count}} {{data.goods.unit ? data.goods.unit.title : '件'}}
					</div>
				</van-cell>
			</van-cell-group>
			<div style="height:5px;"></div>
			<div class="box">
				<h5 class="content_title">详情</h5>
				<div class="content" v-if="data.goods.content != ''">{{data.goods.content}}</div>
				<div class="content" style="text-align:center;" v-else>暂无详情</div>
			</div>
			<div style="height:50px;"></div>
			<itemspecspop v-model="itemid" :item="data" :count.sync="count" @oncar="addcar" @onbuy="buy" :showpop.sync="itemspecspop"></itemspecspop>

			<!--底部的按钮-->
			<div class="shopDetails-bottom">
				<van-goods-action>
					<van-goods-action-mini-btn icon="chat" text="客服" />
					<van-goods-action-mini-btn icon="cart" text="购物车" :info="carnum" @click="TJcartFn"/>
					<!-- <van-goods-action-mini-btn icon="shop" text="店铺" /> -->
					<van-goods-action-big-btn text="加入购物车" @click="addcar" />
					<van-goods-action-big-btn text="立即购买" primary @click="buy" />
				</van-goods-action>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapState } from 'vuex';
	import itemspecspop from '@/components/itemspecspop'
	import cookie from 'js-cookie';
	export default {
		name: "goodsinfo",
		components : {
			itemspecspop
		},
		data () {
			return {
				itemspecspop : false,
				itemid : this.$route.params.itemid,
				storeid : this.$route.params.storeid,
				data : {},
				count : 0,
				scrollops : {
					rail: {
						background: '#01a99a',
						opacity: 0,
						size: '2px'
					},
					bar : {
						showDelay: 100,
						/** 背景色*/
						background: '#E4E7ED',
						/**  透明度  */
						opacity: 0
					}
				}
			}
		},
		methods:{
			//跳转到购物车
			TJcartFn(){
				this.$router.push({ name: "shop_card"});
			},
			//获取商品详情
			initdata(){
				this.loading = true;
				this.$http.item.get('shop/'+this.storeid+'/item/'+this.itemid).then(res => {
					if(!res.data.code){
					  // console.log(res.data.data)
						this.data = res.data.data;
					}else{
						this.$message.error(res.data.message)
					}
					this.loading = false;
				}).catch(error => {
					console.log(error)
					this.loading = false;
				});
			},
			//购买
			buy(){
        if(this.count>0){
          this.$store.commit('shop/paymentdata',[{
            count : this.count,
            item : this.data,
            item_id : this.data.id,
            store_id : this.storeid
          }])
          this.$store.commit('shop/buynow',1)
          this.$router.push({name:'shop_payment'})
        }else{
          // this.$message.error('请选择商品数量!')
          this.$toast('请选择商品数量！')
        }

			},
			//添加购物车
			addcar(){

				if(this.count == 0){
					// return this.$message.error('请选择商品数量!')
          return this.$toast('请选择商品数量！')
				}
				this.$http.order.post('shop/cart',{
					company_id:cookie.get('tanantId'),
					store_id:this.storeid,//店仓ID
					item_id:this.itemid,
					market_price:this.data.price,
					count:this.count
				}).then(res => {
					if(!res.data.code){
						// this.$message.success('添加购物车成功');
            this.$toast('添加购物车成功！')
						this.itemspecspop = false;
						this.$store.dispatch('shop/initshopcar',true);
					}else{
						// this.$message.success('添加购物车失败,'+res.data.message);
            this.$toast('添加购物车失败！'+res.data.message)
					}
				}).catch(err =>{
					console.log(err)
				})

			}
		},
		computed : {
			carnum(){
				return this.$store.state.shop.cardata.length
			},
			imgurl (){
				if(!this.data.goods) return '';
				if(this.data.goods.images != ''){
					return this.$http.IMGURL + this.data.goods.images;
				}else if(this.data.images != ''){
					return this.$http.IMGURL + this.data.images;
				}else{
					return 'http://res2.esf.leju.com/esf_www/statics/images/default-img/detail.png';
				}
			},
			spec(){
				if(!this.data.spec_data) return '';
				return Object.values(this.data.spec_data).join(' ');
			},
			title (){
				if(!this.data.goods) return '';
				return this.data.goods.title + ' ' + this.spec;
			}
		},
		mounted(){

		},
		created(){
			this.initdata();
			this.$store.dispatch('shop/initshopcar',true);
		}
	}
</script>

